import React, { useState } from 'react';
import { Space, Table, Tag, Button, Switch, Drawer, Popconfirm, } from 'antd';
import { useSelector, useDispatch } from 'react-redux';
import MyFrom from './MyFrom';
import { delshoplist,editshoplist } from '../../store/crmsSlice';

//商品列表 表格组件
const ShopList = () => {

  //获取数据
  let obj = useSelector(state => state.crms1)
  //console.log(obj);
  let dispatch = useDispatch()

  //获取编辑数据的状态
  const [itemobj, setItemobj] = useState({})
  //表头设置
  const columns = [
    {
      title: '商品名称',
      dataIndex: 'title',
    },
    {
      title: '商品类型',
      dataIndex: 'typeId',
      render: (typeId) => {
        return obj.typelist.map(item => {
          if (item.typeId == typeId) {
            return item.label
          }
        })
      }
    },
    {
      title: '商品价格',
      dataIndex: 'price',
    },
    {
      title: '商品状态',
      dataIndex: 'Collect',
      render: (Collect,item) => {//切换状态可以使用编辑方法
        return <Switch checked={Collect} onChange={() => {
          let obj = {
            ...item,
            Collect : ! Collect
          }
          //执行编辑的同步方法
          dispatch(editshoplist(obj))
         }} />
      }
    },
    {
      title: '商品规格',
      dataIndex: 'specification',
      render: (specification) => {
        return specification.map(item => {
          return <Tag key={item} color='green'>{item}</Tag>
        })
      }
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button type='primary' onClick={() => {
            //1.显示弹层
            showDrawer()
            //2.修改标题 = 编辑
            setTitle('编辑')
            //3.编辑={...}
            setItemobj(record)
          }}>编辑</Button>
          <Popconfirm
            title="提示"
            description="确定删除吗"
            onConfirm={() => {
              //执行删除的同步方法
              dispatch(delshoplist(record.id))
            }}
            okText="Yes"
            cancelText="No"
          >
            <Button danger>删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  //抽屉组件 控制弹层的方法
  const [open, setOpen] = useState(false);
  //显示
  const showDrawer = () => {
    setOpen(true);
  };
  //隐藏
  const onClose = () => {
    setOpen(false);
  };
  //控制弹层的标题显示
  let [title, setTitle] = useState('添加')


  return <div>

    {/* 抽屉组件 */}
    <div>
      <Button type="primary" onClick={() => {
        //1.显示弹层
        showDrawer()
        //2.修改标题 = 添加
        setTitle('添加')
        //3.添加={}
        setItemobj({})
      }}>
        添加
      </Button>
      <Drawer
        title={title}
        closable={{ 'aria-label': 'Close Button' }}
        onClose={onClose}
        open={open}
      >
        {/* 表单组件是个子组件 父传子的方式传递方法和数据 */}
        <MyFrom onClose={onClose} key={new Date().getTime()}
          itemobj={itemobj} title={title}></MyFrom>
      </Drawer>
    </div>

    {/* 表格 */}
    <Table columns={columns} dataSource={obj.shoplist} rowKey={'id'} pagination={{ pageSize: 4 }} />
  </div>
};
export default ShopList;
